<div *ngIf="featureData?.eqtType === EQUIPMENT_CODE.TSC; else elseTemplate" class="tsc" style="width:100%;height:100%">
	<div class="tsc-header flex flex-justify-between">
		<div class="flex"
			style=" width: 100%;   justify-content: space-between;padding-right: 80px;align-items: center;">
			<i class="features-item-icon iconfont icon-honglvdeng"></i>

			<div class="equipment-title" style="margin-right:10px">
				{{"EquipmentManagement.EquipmentManagement.id" | translate}}: {{featureData?.eqtId}}</div>
			<div class="equipment-title" style="margin-right:10px">
				{{"EquipmentManagement.EquipmentManagement.Status" | translate}}: {{eqtDetail.status}}</div>
			<div class="equipment-title" style="margin-right:10px">
				{{"EquipmentManagement.EquipmentManagement.Control_Mode" | translate}}:
				{{controlMode[eqtDetail.controlMode]}}</div>
		</div>
		<div  class="flex" style="align-items: center;width: 25px;" (click)="close()">
			<i class="iconfont icon-fork cur-p"></i>
		</div>
	</div>
	<div class="equipment-content">
		<div class="equipment-info-details flex flex-row flex-wrap"
			style="display: flex;justify-content: space-evenly;align-items: center;">
			<div>
				{{"EquipmentManagement.EquipmentManagement.RoadName" | translate}}:  {{ eqtDetail.roadDetectorStates ? eqtDetail.roadDetectorStates[0].road : ''}}
			</div>
			<div>
				{{"Gis.Legends.treeData.Congestion" | translate}}:
				
			</div>
			<div class="equipment-status-radius" [ngClass]="{'radius-red':eqtDetail.congestion=== 0 }"></div>
		</div>
		<div>
			<nz-table class="table" id="nzTable" #basicTable [nzShowPagination]="false"
				[nzData]="eqtDetail.roadDetectorStates" [nzFrontPagination]="false">
				<thead>
					<tr class="dataTitle">
						<th class="listTitle" nzWidth="175px">
							{{"EquipmentManagement.EquipmentManagement.Road" | translate}}</th>
						<th class="listTitle" nzWidth="175px">
							{{"EquipmentManagement.EquipmentManagement.SG_ID" | translate}}</th>
						<th class="listTitle" nzWidth="175px">
							{{"EquipmentManagement.EquipmentManagement.Status" | translate}}</th>
						<!-- <th *ngFor="let item of renderStatistical" class="listTitle">
				  <div>{{'DataManagement.TrafficAccidentReport.' + item.name | translate}}</div>
				</th> -->
					</tr>
				</thead>
				<tbody class="dataList">
					<tr *ngFor="let data of basicTable.data;index as i">
						<td>{{data.road}}</td>
						<td>{{data.sgId}}</td>
						<td>
							<div class="equipment-status-radius" [ngClass]="{'radius-yellow':data.status==='1','radius-red':data.status==='2'}"></div>
						</td>
					</tr>
				</tbody>
			</nz-table>
		</div>
	</div>
</div>
<ng-template #elseTemplate>


	<div class="-overlay" style="width:100%;height:100%">
		<div class="equipment-header flex flex-justify-between">
			<div class="header-right-part flex">
				<i class="features-item-icon iconfont icon-honglvdeng"
					*ngIf="featureData?.eqtType === EQUIPMENT_CODE.TSC"></i>
				<i class="features-item-icon iconfont icon-ziyuan"
					*ngIf="featureData?.eqtType === EQUIPMENT_CODE.VD"></i>
				<i class="features-item-icon iconfont icon-VectorSmartObject"
					*ngIf="featureData?.eqtType === EQUIPMENT_CODE.VMS"></i>
				<i class="features-item-icon iconfont icon-CCTV"
					*ngIf="featureData?.eqtType === EQUIPMENT_CODE.CCTV"></i>
				<div class="equipment-title" style="margin-right:10px">
					{{"Gis.EquipmentLayer.Equipment_Information" | translate}}</div>
			</div>
			<div class="header-left-part flex">
				<div class="equipment-time">
					{{moment(featureData?.netDate).isValid() 
				? moment(featureData?.netDate).format('MM/DD/YYYY h:mm A')
				: 'invalid Date'}}
				</div>
				<div class="overlay-tool-bar flex">
					<i class="iconfont icon-fork cur-p" (click)="close()"></i>
				</div>
			</div>
		</div>
		<div class="equipment-content">
			<div class="equipment-info-details flex flex-row flex-wrap">
				<div class="equipment-info-item w50p">
					<div class="equipment-item-left text-ellipsis">ID: {{featureData?.eqtId}}</div>
				</div>
				<div class="equipment-info-item w25p">
					<div class="text-ellipsis">{{"Gis.EquipmentLayer.Status" | translate}}: {{featureData?.status}}
					</div>
				</div>
				<!-- <div class="equipment-info-item w25p">
				<button class="mask-out-btn" nz-button>Mask Out</button>
			</div> -->
				<div class="equipment-info-item w50p">
					<div class="text-ellipsis">{{"Gis.EquipmentLayer.Road_Name" | translate}}: {{featureData?.roadName}}
					</div>
				</div>
				<!-- <div class="equipment-info-item w50p" *ngIf="featureData.eqtType === 0">
				<div class="text-ellipsis">{{"EquipmentManagement.vmsModal.Illum_Num_Level" | translate}}:
					{{vmsgetData.illumNumLevels}}</div>
			</div> -->
				<div class="equipment-info-item w50p" *ngIf="featureData.eqtType === 0">
					<div nz-col nzSpan="10">
						<label class="equipment-item-left  text-ellipsis"
							for="">{{"EquipmentManagement.vmsModal.Illum_Mode" | translate}}:</label>
					</div>
					<div nz-col nzSpan="10">
						<nz-select [(ngModel)]="vmsgetData.illumMode" [nzPlaceHolder]="'' | translate" style="width: 100%">
							<nz-option [nzLabel]="item.name" [nzValue]="item.value"
								*ngFor="let item of vms?.illumModeList || []">
							</nz-option>
						</nz-select>
					</div>
				</div>
				<div class="equipment-info-item w50p" *ngIf="featureData.eqtType === 0">
					<div nz-col nzSpan="10">
						<label class="equipment-item-left  text-ellipsis"
							for="">{{"EquipmentManagement.vmsModal.Illum_Level" | translate}}:</label>
					</div>
					<div nz-col nzSpan="10">
						<nz-input-number [(ngModel)]="vmsgetData.illumLevel" [nzMin]="1" [nzMax]="10" [nzStep]="1"
							[nzPrecision]="0" style="width: 100%">
						</nz-input-number>
					</div>
				</div>

				<!-- <div class="equipment-info-item w25p">
				<div class="text-ellipsis">Km: 52.60</div>
			</div>
			<div class="equipment-info-item w25p" style="text-align: right;padding-right: 50px">
				<i class="iconfont icon-dingwei cur-p"></i>
			</div>
			<div class="equipment-info-item w50p">
				<div class="text-ellipsis">Control Mode: Remote</div>
			</div>
			<div class="equipment-info-item w25p">
				<div class="text-ellipsis">T: 25<i class="iconfont icon-sheshidu01"></i></div>
			</div>
			<div class="equipment-info-item w25p">
				<div class="text-ellipsis">Pixels: Error</div>
			</div> -->
			</div>
			<div class="equipment-action" *ngIf="featureData.eqtType === 0">
				<itmp-vms-set [data]="featureData" (initdata)="initData($event)"></itmp-vms-set>
				<div class="save-button">
					<button nz-button nzType="primary"
						(click)="handleOk()">{{"EquipmentManagement.vmsModal.save" | translate}}</button>
				</div>
			</div>
			<div class="equipment-action" *ngIf="featureData.eqtType === 3">
				<itmp-cctv-play> </itmp-cctv-play>
			</div>
		</div>
	</div>
</ng-template>